<template>
	<div id="app" :class="{'ios':ios,'iphonex':iphonex,'bg':bg=='bgInvite'}">
		<div class="shadow" :class="bg"></div>
		<keep-alive>
			<router-view id="view" v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		<router-view id="view" v-if="!$route.meta.keepAlive"></router-view>
		<mydialog v-if="$route.name=='home'||$route.name=='account'"/>
	</div>
</template>

<script>
import mydialog from "@/components/Dialog/index"
import { getSystemType, isIphonex } from '@/utils'
export default {
	name: 'App',
	components:{
		mydialog
	},
	data(){
		return{
			ios:false,
			iphonex:false,
			bg:''
		}
	},
  	mounted(){
		if( getSystemType().type == 'ios' ){
			this.ios = true;
			if(isIphonex()){
				this.iphonex = true;
			}
		}
  	},
  	watch:{
		$route(){
			if(this.$route.name == 'login'){
				this.bg = 'bgLogin';
			}else if(this.$route.name == 'wallet'){
				this.bg = 'bgWallet';
			}else if(this.$route.name == 'myLevel'){
				this.bg = 'bgLevel';
			}else if(this.$route.name == 'invite'){
				this.bg = 'bgInvite';
			}else{
				this.bg = 'bgOther';
			}
		}
  	}
}
</script>

<style lang="stylus" scoped>
#app{
  	height:100%;
	overflow: hidden;
	position: relative;
	.shadow{
		position:absolute;
		top:0;
		left:0;
		right:0;
		&.bgLogin{
			background: #465FF7;
		}
		&.bgWallet{
			background: #5E87FF;
		}
		&.bgLevel{
			background: linear-gradient(90deg, #222836, #141d31);
		}
		&.bgInvite{
			background: linear-gradient(to right, #3345D4, #4438D8);
		}
		.bgOther{
			background: #fff;
		}
	}
	&.ios{
		padding-top:20px;
		.shadow{
			height:20px;
		}
	}
	&.iphonex{
		padding: 45px 0 35px 0;
		.shadow{
			height:45px;
		}
	}
	&.bg{
		background: linear-gradient(to right, #5408C7, #2451BE); 
	}
	#view{
		height:100%;
		max-width: 750px;
		margin: 0 auto;
		position: relative;
	}
}
</style>
